import React, { useRef, useState, useEffect } from "react";
import { Helmet } from "react-helmet";

export default function SmartBGRemover() {
  const [fileName, setFileName] = useState("");
  const [src, setSrc] = useState(null);
  const [resultUrl, setResultUrl] = useState(null);
  const [loading, setLoading] = useState(false);
  const fileInputRef = useRef(null);
  const canvasRef = useRef(null);

  useEffect(() => {
    document.title = "Smart Background Remover | Free Online Tool - Asad Innovation";
  }, []);

  const handleFile = async (file) => {
    if (!file) return;
    setFileName(file.name);
    const url = URL.createObjectURL(file);
    setSrc(url);
    setResultUrl(null);
  };

  const onDrop = (e) => {
    e.preventDefault();
    const file = e.dataTransfer.files?.[0];
    handleFile(file);
  };

  const onChooseFile = (e) => {
    const file = e.target.files?.[0];
    handleFile(file);
  };

  const removeBackgroundClient = async () => {
    if (!src) return;
    setLoading(true);
    setResultUrl(null);
    await new Promise((r) => setTimeout(r, 50));

    const img = new Image();
    img.crossOrigin = "anonymous";
    img.src = src;
    img.onload = () => {
      const canvas = canvasRef.current;
      if (!canvas) {
        setLoading(false);
        alert("Canvas not available.");
        return;
      }
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext("2d");
      if (!ctx) {
        setLoading(false);
        alert("Context not available.");
        return;
      }

      ctx.drawImage(img, 0, 0);
      const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const data = imgData.data;
      const bg = [data[0], data[1], data[2]];
      const threshold = 60;

      for (let i = 0; i < data.length; i += 4) {
        const r = data[i], g = data[i + 1], b = data[i + 2];
        const dist = Math.sqrt((r - bg[0]) ** 2 + (g - bg[1]) ** 2 + (b - bg[2]) ** 2);
        if (dist < threshold) data[i + 3] = 0;
      }

      ctx.putImageData(imgData, 0, 0);
      canvas.toBlob((blob) => {
        if (!blob) return setLoading(false);
        const urlOut = URL.createObjectURL(blob);
        setResultUrl(urlOut);
        setLoading(false);
      }, "image/png");
    };
  };

  const processImage = async () => {
    if (!fileInputRef.current?.files?.[0] && !src) return;
    await removeBackgroundClient();
  };

  const downloadResult = () => {
    if (!resultUrl) return;
    const a = document.createElement("a");
    a.href = resultUrl;
    a.download = fileName ? `cutout-${fileName.replace(/\.[^.]+$/, "")}.png` : "cutout.png";
    document.body.appendChild(a);
    a.click();
    a.remove();
  };

  const clearAll = () => {
    setSrc(null);
    setResultUrl(null);
    setFileName("");
    if (fileInputRef.current) fileInputRef.current.value = null;
  };

  return (
    <>
      <Helmet>
        <title>Smart Background Remover | Free Online Tool - Asad Innovation</title>
        <meta name="description" content="Remove image backgrounds instantly with Smart Background Remover. 100% free, fast, and online by Asad Innovation." />
        <meta name="keywords" content="background remover, remove bg, online background remover, transparent image, Asad Innovation" />
      </Helmet>

      <div className="min-h-screen bg-gradient-to-b from-indigo-50 to-white flex items-center justify-center p-6">
        <div className="max-w-4xl w-full bg-white shadow-2xl rounded-3xl p-8 border border-slate-100">
          <h1 className="text-3xl md:text-4xl font-extrabold text-center mb-6 text-indigo-800">
            Smart Background Remover <span className="text-indigo-500">Online Tool</span>
          </h1>
          <p className="text-center text-slate-600 mb-4">
            Upload any photo and get a transparent background instantly. Free, fast, and AI-powered.
          </p>

          <div
            onDrop={onDrop}
            onDragOver={(e) => e.preventDefault()}
            className="border-2 border-dashed border-indigo-200 rounded-2xl p-6 text-center cursor-pointer hover:border-indigo-400 transition"
            onClick={() => fileInputRef.current?.click()}
          >
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              onChange={onChooseFile}
              className="hidden"
            />
            <div className="text-slate-600">Drag & drop an image here or click to upload</div>
          </div>

          <div className="mt-6 text-center">
            {src ? (
              <img src={src} alt="preview" className="max-w-full max-h-64 mx-auto object-contain rounded-xl shadow" />
            ) : (
              <div className="text-slate-400">No image selected</div>
            )}
          </div>

          <div className="flex flex-wrap gap-3 mt-6 justify-center">
            <button
              onClick={processImage}
              disabled={!src}
              className="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-xl disabled:opacity-50 transition"
            >
              {loading ? "Processing..." : "Remove Background"}
            </button>
            <button onClick={clearAll} className="border px-4 py-2 rounded-xl text-sm hover:bg-slate-100">Clear</button>
          </div>

          <div className="mt-6 text-center">
            {loading ? (
              <div className="text-slate-500 animate-pulse">Removing background...</div>
            ) : resultUrl ? (
              <img src={resultUrl} alt="result" className="max-w-full max-h-64 mx-auto object-contain rounded-xl shadow" />
            ) : (
              <div className="text-slate-400">Upload an image to get started</div>
            )}
          </div>

          {resultUrl && (
            <div className="flex justify-center gap-3 mt-4">
              <button onClick={downloadResult} className="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl transition">Download PNG</button>
            </div>
          )}

          <canvas ref={canvasRef} className="hidden" />
          <div className="mt-8 text-center text-xs text-slate-400">© {new Date().getFullYear()} Asad Innovation — Smart Background Remover</div>
        </div>
      </div>
    </>
  );
}